<template>
    <div class="video">
        <div class="add" style="display: flex;justify-content: flex-end;">
            <el-button type="primary" size="default" @click="to_video_edit"
                style="font-size: 30px;margin-right: 2vw;margin-bottom: 1vw;font-weight: bold;">+</el-button>

        </div>
        <el-table :data="Datalist" style="width: 100%">
            <el-table-column label="发布时间" width="180">

                <template #default="scope">
                    <div style="display: flex; align-items: center">

                        {{ scope.row.publish_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="修改时间" width="180">

                <template #default="scope">
                    <div style="display: flex; align-items: center">

                        {{ scope.row.end_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="标题" width="180">
                <template #default="scope">
                    <el-tag>{{ scope.row.title }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="封面" width="280">
                <template #default="scope">
                    <el-image :src="base_url + scope.row.cover_img" fit="fill" style="width: 150px;height: 70px;"
                        :lazy="true"></el-image>

                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确认删除?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="handleDelete(scope.$index, scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination layout="prev, pager, next" v-model:current-page="currentPage"
                @current-change="handleCurrentChange" :page-size="4" :total="count" background />
        </div>
    </div>
</template>
<!-- video_edit -->
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue';
import VideoStore from '@/store/VideoStore';
import { format } from "@/utils/formatTime"
const currentPage = ref(1)
const base_url = import.meta.env.VITE_APP_URL
const store = VideoStore()
const router = useRouter()
const count = ref(0)
const Datalist = ref([
])
onMounted(async () => {
    await getDtaa(currentPage.value)
})
const getDtaa = async (id: number) => {
    const result: any = await store.Get_list_vidoe(id * 4 - 4)
    result.data.forEach((item: any, index: any) => {
        result.data[index].publish_time = format.formatDate(item.publish_time)
        result.data[index].end_time = format.formatDate(item.end_time)
    });
    Datalist.value = result.data
    count.value = result.count
}
const handleCurrentChange = (e: number) => {
    e
    getDtaa(currentPage.value)
}
const handleEdit = (index: any, row: any) => {
    index
    router.push(`/back/update_Video/${row._id}`)
}
const handleDelete = async (index: any, row: any) => {
    index
    await store.delete_video(row._id)
    getDtaa(currentPage.value)
}
const to_video_edit = () => {

    router.push('/back/edit_video')
}
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 1vw;
}
</style>